<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>编辑广告</title>
	<#include "/common/vue_resource.ftl">
	<style>
		.avatar-uploader .el-upload {
			border: 1px dashed #d9d9d9;
			border-radius: 6px;
			cursor: pointer;
			position: relative;
			overflow: hidden;
		}
		.avatar-uploader .el-upload:hover {
			border-color: #409EFF;
		}
		.avatar-uploader-icon {
			font-size: 28px;
			color: #8c939d;
			width: 178px;
			height: 178px;
			line-height: 178px;
			text-align: center;
		}
		.avatar {
			width: 178px;
			height: 178px;
			display: block;
		}
	</style>
</head>
<body>
<div id="app" v-cloak>
	<div class="ui-form">
		<el-form :model="advertise" :rules="rules" ref="advertise" label-width="100px" class="demo-ruleForm">
			<el-form-item label="广告名称" prop="name">
				<el-input v-model="advertise.name"></el-input>
			</el-form-item>
			<el-form-item label="开始时间" required prop="startDate">
				<el-col :span="11">
					<el-form-item prop="date1">
						<el-date-picker type="date" placeholder="开始时间" v-model="advertise.startDate" style="width: 100%;"></el-date-picker>
					</el-form-item>
				</el-col>
			</el-form-item>
			<el-form-item label="结束时间" required prop="endDate">
				<el-col :span="11">
					<el-form-item>
						<el-date-picker type="date" placeholder="结束时间" v-model="advertise.endDate" style="width: 100%;"></el-date-picker>
					</el-form-item>
				</el-col>
			</el-form-item>
			<el-form-item label="上线/下线" prop="status">
                <el-switch
                        v-model="advertise.status"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        :active-value="1"
                        :inactive-value="0">
                </el-switch>
			</el-form-item>
			<el-form-item label="类型" prop="type">
				<el-select v-model="advertise.type" placeholder="请选择广告类型">
					<el-option label="PC首页轮播" :value="0"></el-option>
					<el-option label="APP首页轮播" :value="1"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="广告图片">
				<el-upload
						class="avatar-uploader"
						action="${params.contextPath!}/web/attachment/upload.json"
						:show-file-list="false"
						:on-success="handleAvatarSuccess"
						:before-upload="beforeAvatarUpload"
						name="files">
					<img v-if="imageUrl" :src="imageUrl" class="avatar">
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</el-form-item>
			<el-form-item label="链接地址" prop="url">
				<el-input v-model="advertise.url"></el-input>
			</el-form-item>
			<el-form-item label="排序" prop="sort">
				<el-input v-model="advertise.sort"></el-input>
			</el-form-item>

			<el-form-item label="备注">
				<el-input type="textarea" v-model="advertise.note"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="save('advertise')">保存</el-button>
				<el-button @click="cancel">取消</el-button>
			</el-form-item>
		</el-form>
	</div>
</div>
<script>
	var app = new Vue({
		el: '#app',
		data: {
			advertise : {
				id:'${params.id!}',
				id:'',
				name:'',
				startDate:'',
				endDate:'',
				status: 0,
				type:'',
				pic:'',
				clickCount:'',
				orderCount:'',
				url:'',
				note:'',
				sort:'',
				isDel:'',
				createId:'',
				createTime:'',
				modifyId:'',
				modifyTime:'',
			},
			imageUrl: '',
            attachmentId: '',
			rules: {
				name: [
					{ required: true, message: '请输入广告名称', trigger: 'blur' }
				],
				startDate: [
					{type: 'date', required: true, message: '请选择开始时间', trigger: 'change' }
				],
				endDate: [
					{ type: 'date', required: true, message: '请选择结束时间', trigger: 'change' }
				],
				status: [
					{ required: true, message: '请选择状态', trigger: 'change' }
				],
				type: [
					{ required: true, message: '请选择广告类型', trigger: 'change' }
				],
				url: [
					{ required: true, message: '请输入广告链接地址', trigger: 'blur' }
				],
				sort: [
					{ required: true, message: '请输入广告排序', trigger: 'blur' }
				]
			}
		},
		mounted: function () {
			this.init();
			this.loadData();
		},
		methods: {
			init:function(){
				var that = this;
				/*laydate.render({elem: '#beginDate', type:'datetime', done:function (value) {
						that.record.beginDate = value;
					}});*/
			},
			loadData: function () {
				if (!'${params.id!}') {
					return;
				}
				var that = this;
				$.http.post('${params.contextPath}/web/smsHomeAdvertise/query.json', {id: '${params.id!}'}).then(function (data) {
					if (!data.success) {
						$.message(data.message);
						return;
					}
                    that.advertise = data.data;
                    that.imageUrl = '${params.fileRequestUrl!}' + that.advertise.pic;
				});
			},
			save: function (formName) {
			    console.log(this.advertise);
				this.$refs[formName].validate((valid) => {
					if (valid) {
						$.http.post('${params.contextPath}/web/smsHomeAdvertise/<#if (params.id)??>modify<#else>save</#if>.json', {advertiseStr: JSON.stringify(this.advertise), attachmentId: this.attachmentId}).then(function (data) {
							if (!data.success) {
								$.message(data.message);
								return;
							}
							var alt = layer.alert(data.message || "操作成功", function () {
								parent.app.loadData();
								parent.layer.closeAll();
								layer.close(alt);
							});
						});
					} else {
						return false;
					}
				});

			},
			cancel: function () {
				$.http.post('${params.contextPath}/web/smsHomeAdvertise/<#if (params.id)??>modify<#else>save</#if>.json', this.record).then(function (data) {
					if (!data.success) {
						$.message(data.message);
						return;
					}
					var alt = layer.alert(data.message || "操作成功", function () {
						parent.app.loadData();
						parent.layer.closeAll();
						layer.close(alt);
					});
				});
			},
			handleAvatarSuccess(res, file) {
				this.imageUrl = '${params.fileRequestUrl!}' + res.data[0].path;
				this.advertise.pic = res.data[0].path;
				this.attachmentId = res.data[0].id;
			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 10;

				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 10MB!');
				}
				return isJPG && isLt2M;
			}
		}
	});
</script>
</body>

</html>
